<template>
    <div class="dict-type"> 
        <el-card class="!border-none" shadow="never">
           
            <div class="mt-4" v-loading="pager.loading">
                <div>
                    <el-table
                        :data="pager.lists"
                        size="large"
                        @selection-change="handleSelectionChange"
                    > 
                        <el-table-column label="ID" prop="id" width="100" />
                        <el-table-column label="用户名" prop="user_name"/>
                        <el-table-column label="登录ip" prop="ip"/>
                        <el-table-column label="登录设备">
                            <template v-slot="{ row }"> 
                                {{ stringToObj(row.os) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="登录浏览器">
                            <template v-slot="{ row }"> 
                                {{ stringToObj(row.browser) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="登录时间" >
                            <template #default="{ row }"> 
                                {{ $formatDt(row.createdAt) }}
                             </template>
                        </el-table-column> 
                        <el-table-column label="状态">
                            <template v-slot="{ row }">
                                <el-tag :type="row.status == 1 ? 'success' : 'danger'">{{ row.status_text }}</el-tag> 
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup name="loginlog">
import { getLoginLog } from '@/apis/system/admin'
import { usePaging } from '@/hooks/usePaging'
 
const stringToObj = val => {
    const obj = JSON.parse(val)
    return `${obj.name}${obj.version}`
}
 

const { pager, getLists } = usePaging({
    fetchFun: getLoginLog, 
})

const selectData = ref([])

const handleSelectionChange = (val) => {
    selectData.value = val.map(({ id }) => id)
}
  

onMounted(() => {
  getLists()
})
</script>
